<!-- ComboboxOption.vue -->
<script setup>
defineProps({
  option: Object,
  labelKey: String,
  valueKey: String,
  isSelected: Boolean
});
</script>

<template>
  <li
      :class="{ 'selected': isSelected }"
      @click="$emit('select', option)"
  >
    <!-- 默认插槽允许自定义渲染 -->
    <slot :option="option">
      {{ option[labelKey] }}
    </slot>
  </li>
</template>

<style scoped>
li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

li:hover {
  background-color: #f5f7fa;
}

li.selected {
  background-color: #ecf5ff;
  color: #409eff;
}
</style>